<template>
  <nav>
    <div style="max-width:1240px;margin:auto;height:100%;width:100%">
      <strong>{{ article.articleTitle }}</strong>
    </div>
  </nav>
  <el-scrollbar>
  <div style="margin-top: 60px"></div>
  <main>
    <h1 style="text-align:center">{{ article.articleTitle }}</h1>
    <div style="display:flex;justify-content: center;">
      <small style="display:block">发布于{{ date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日'}}
      </small>&nbsp;&nbsp;
      <small style="display:block"> {{ article.articleEye }} 次浏览</small>&nbsp;&nbsp;
      <small style="display:block"> {{ article.commentCount }} 条评论</small>&nbsp;&nbsp;
      <small style="display:block"> {{ article.articleThumbUp }} 个点赞</small>&nbsp;&nbsp;
      <small style="display:block"> {{ article.articleNickname }} 发布</small>
    </div>
    <el-divider />
    <article v-html="article.articleContent">
    </article>
    <p style="text-align:right;margin:20px;color:red">文章由用户编写，不代表本站的观点！</p>
    <el-divider />
    <div style="display:flex;justify-content: right;">
      <span style="display:block;cursor:pointer;margin: 10px;">
        收藏
      </span>
      <span style="display:block;cursor:pointer;margin: 10px;" @click="thumbUp">
        点赞
      </span>
      <!-- <span style="display:block;cursor:pointer;margin: 10px;">
        举报
      </span> -->
    </div>
    <div style="margin:50px auto 100px">
      <span style="font-size:25px">
        {{ commentCount }} 条评论
      </span><br>
      <el-divider />
      <comment-component :commentTACallback="commentTACallback" :commentItem="comment" 
      v-for="comment in commentList" :key="comment.commentId"/>
    </div>
  </main>
  <div class="article_bottom" :style="{'display':user!=null?'flex':'none'}">
    <div style="max-width:1000px;width:100%">
      <p v-if="commentTA.visible">回复 {{ commentTA.nickName }} 的评论 : {{ commentTA.content }}
        <br><el-link type="primary" @click="cancelComentTA">取消回复</el-link>
      </p>
      <el-input v-model="commentArea" :rows="2" type="textarea" :placeholder="placeholder" />
    </div>
    <el-button style="margin:auto 20px" type="primary" @click="postComment">发表评论</el-button>
  </div>
</el-scrollbar>
  <el-backtop :right="100" :bottom="100" />
</template>

<script>
import CommentComponent from '@/components/CommentComponent.vue'
import { ElMessage } from 'element-plus'

export default {
  components: { CommentComponent },
  data() {
    return {
      article: {
        articleTitle: '',
        articleContent: ''
      },
      user:null,
      placeholder:'回复这个贴文',
      commentArea:null,
      date: new Date(1671863318000),
      commentParentId:0,
      commentCount:0,
      commentList:[],
      commentTACallback:(obj)=>{
        // console.log(obj);
        obj.visible=true,
        this.commentParentId=obj.commentId
        this.commentTA=obj
        this.placeholder='回复 '+obj.nickName+' : '
      },
      commentTA:{
        visible:false,
        userId:'',
        nickName:'',
        content:'',
        commentId:'',
      }
    }
  },
  created() {
    this.$store.dispatch("updateUser").then(() => {
      this.user = this.$store.state.user;
    });
    this.$fetchutil.get('/browse/article_detail?articleId=' + this.getQueryVariable('id'), data => {
      this.article = data.data
      document.title = this.article.articleTitle
      this.date = new Date(this.article.articleDate)
      this.loadComment()
    })
    
  },
  methods: {
    getQueryVariable(variable) {
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) { return pair[1]; }
      }
      return (false);
    },
    postComment(){
      if(this.commentArea==null||this.commentArea=='')return
      
      this.$request.post('/comment/post_comment',{
        commentParentId:this.commentParentId,
        commentContent:this.commentArea,
        commentArticleId:this.article.articleId

      }).then(data=>{
        ElMessage({
            message: data.msg,
            type: data.success?"success":"error",
        })
        if(data.success){
          this.loadComment()
          this.cancelComentTA()
          this.commentArea=''
        }
      })
    },
    cancelComentTA(){
      this.commentTA.visible=false
      this.commentParentId=0
      this.placeholder='回复这个贴文'
    },
    loadComment(){
      this.$fetchutil.get('/browse/comment/article_comment_list?articleId='+this.article.articleId,data=>{
        this.commentList=data.data
        // console.log(this.commentList[0].commentId);
      })
    },
    thumbUp(){
      this.$request('/article/article_thumb?articleId='+this.article.articleId).then(data=>{
        ElMessage({
            message: data.msg,
            type: data.success?"success":"error",
        })
        if(data.success){
          this.article.thumbUp++
        }
      })
    }
  },
  watch:{
    commentList(to){
      this.commentCount=0
      to.forEach(item=>{
        this.commentCount++
        item.subComment.forEach(()=>this.commentCount++)
      })
    }
  }
}
</script>

<style>
nav {
  height: 60px;
  position: fixed;
  width: 100%;
  padding: 0 10px;
  z-index: 10;
  box-sizing: border-box;
  top: 0;
  border-bottom: 1px solid #cdd0d6;
  display: flex;
  backdrop-filter: saturate(180%) blur(6px);
  background: rgba(255, 255, 255, 0.9);
}

nav strong {
  padding: 0 10px;
  box-sizing: border-box;
  color: var(--el-text-color-regular);
  cursor: pointer;
  margin: auto;
  line-height: 60px;
  font-weight: normal;
}

main {
  max-width: 1240px;
  margin: auto;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  overflow-x: hidden;
}

main>h1 {
  margin: 20px;
}

article img {
  max-width: 100%;
}

.article_bottom {
  height: fit-content;
  position: fixed;
  padding: 20px;
  bottom: 0px;
  z-index: 5;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  background-color: white;
  border-top: 1px solid #cdd0d6;
}
</style>